<template>
	<w-collapse v-model="basicInfocollapseVisible" disabled :showArrow="false" title="基础信息">
		<el-form ref="form" :model="routeDetails" :rules="rules" size="mini" label-width="150px" inline>
			<fx-detials-form-row>
				<el-form-item slot="left" prop="materialId" label="产品：">
					<w-select :multiple='false' v-model="routeDetails.materialId"
						:clearable='false' :collapseTags='false'
						:optionlist='materialNameList' :isBlock='true'
						:disabled="disabled"
						class="form-item-input">
					</w-select>
				</el-form-item>
				<el-form-item slot="right" prop="code" label="工艺路线编号：">
					<w-input
						v-model="routeDetails.code"
						:maxlength="$fxCommon.getFxInputMaxLength('commonCode')"
						:regType="$fxCommon.getFxInputReg('commonCode')"
						:disabled="disabled"
						class="form-item-input"
					></w-input>
				</el-form-item>
			</fx-detials-form-row>
			<fx-detials-form-row>
				<el-form-item slot="left" prop="version" label="工艺路线版本编号：">
					<w-input
						v-model="routeDetails.version"
						:maxlength="$fxCommon.getFxInputMaxLength('commonCode')"
						:regType="$fxCommon.getFxInputReg('commonCode')"
						:disabled="disabled"
						class="form-item-input"
					></w-input>
				</el-form-item>
				<el-form-item slot="right" prop="effectDate" label="工艺生效日期：">
					<el-date-picker
						v-model="routeDetails.effectDate"
						type="datetime"
						format="yyyy-MM-dd HH:mm"
						value-format="yyyy-MM-dd hh:mm:ss"
						placeholder="选择日期时间"
						:disabled="disabled"
						class="form-item-input"
					>
					</el-date-picker>
				</el-form-item>
			</fx-detials-form-row>
			<fx-detials-form-row>
				<el-form-item slot="left" prop="enable" label="启停状态：" style="margin-left:10px;">
					<el-switch v-model="routeDetails.enable"
					:active-value="1" :inactive-value="0"
					:disabled="disabled"
					class="form-item-input"></el-switch>
				</el-form-item>
				<el-form-item slot="right" prop="productionLineId" label="所属产线：">
					<w-select :multiple='false' v-model="routeDetails.productionLineId" @change='productionLineChange'
						:clearable='false' :collapseTags='false'
						:optionlist='productionLineList' :isBlock='true'
						:disabled="disabled"
						class="form-item-input">
					</w-select>
				</el-form-item>
			</fx-detials-form-row>
			<fx-detials-form-row>
				<el-form-item label="工艺路线描述：" class="form-item-memo">
					<w-input
						v-model="routeDetails.remark"
						:maxlength="$fxCommon.getFxInputMaxLength('remark')"
						:regType="$fxCommon.getFxInputReg('remark')"
						class="form-item-input-full"
					></w-input>
				</el-form-item>
			</fx-detials-form-row>
		</el-form>
	</w-collapse>
</template>
<script>
export default {
	name: 'basicInfo',
	props: {
		visibleFlag: Boolean,
		routeDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		materialNameList: {
			type: Array,
			default: () => {
				return []
			}
		},
		productionLineList: {
			type: Array,
			default: () => {
				return []
			}
		},
		disabled: Boolean
	},
	data () {
		return {
			basicInfocollapseVisible: true,
			rules: {
				materialId: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				code: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				version: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				effectDate: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				productionLineId: [{ required: true, message: '该字段不能为空', trigger: 'change' }]
			}
		}
	},
	watch: {
		visibleFlag: {
			immediate: true,
			handler (val) {
				if (val) {
					this.refresh()
				}
			}
		}
	},
	methods: {
		refresh () {
			this.$nextTick(() => {
				this.$refs.form.clearValidate()
			})
		},
		validate () {
			return this.$refs.form.validate()
		},
		productionLineChange (value) {
			this.$emit('productionLineChange')
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-item-input {
	width: 275px
	box-sizing: border-box
}
.form-item-input-full {
	width:755px
}
.form-item-input-buyer {
	width: 220px
}
.form-item-memo {
	>>>.el-form-item__label {
		padding-left:10px
	}
}
</style>
